<template>
  <div>
    <h2>App组件</h2>
    <h2>msg: {{ msg }}</h2>
    <h2>count:{{ count }}</h2>
    <h2>count:{{ count2() }}</h2>
    <h2>{{ p }}</h2>
    <button @click="msg = '111'">修改msg</button>
    <button @click="clickHandler">点我</button>
    <hr />
    <A></A>
  </div>
</template>
<script>
import A from "./components/A.vue";
export default {
  name: "App",
  data() {
    return {
      msg: "hello",
      p: 0,
    };
  },
  methods: {
    count2() {
      console.log("methods");
      return 100;
    },
    clickHandler() {
      this.p++;
    },
  },
  components: {
    A,
  },
  // 使用provide传递数据
  provide() {
    return {
      msg: this.msg,
    };
  },
  computed: {
    count() {
      console.log("计算属性");
      return this.msg + "111";
    },
  },
};
</script>

<style lang="less" scoped></style>
